<template>
    <basic-container>
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   ref="crud"
                   v-model="form"
                   :permission="permissionList"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   :page="page"
                   @on-load="onLoad">
           <template slot="status" slot-scope="scope">
              <el-badge v-if="scope.row.status==0" is-dot class="item" style="top: 4px !important;">
                 <el-tag type="danger">
                   未处理
                 </el-tag>
              </el-badge>
              <el-tag v-else type="success">已处理</el-tag>
           </template>
           <template slot-scope="scope" slot="menu" >
            <el-popover
              popper-class="shopcarmx" 
              placement="top"
              trigger="click"
              v-if="roleId ==1">
              <span>{{ orderDetail.vageName }}</span>
              <el-button  
                  slot="reference"
                  type="primary"
                  icon="el-icon-s-order"
                  size="small"
                  @click="handleOrder(scope.row.orderCode)"
                  plain>
                  处理</el-button>
            </el-popover>

            <el-popover
              popper-class="shopcarmx" 
              placement="top"
              trigger="click"
              v-else>
              <el-button  
                  slot="reference"
                  type="primary"
                  icon="el-icon-s-order"
                  size="small"
                  @click="handleEdit(scope.row.orderCode)"
                  plain>
                  详情</el-button>
            </el-popover>
            </template>
        </avue-crud>

       

      </basic-container>
    </template>
    
    <script>
    import {getList,getOrderDetail } from "@/api/system/order";
    import {getStore} from '@/util/store'
    import { status } from "nprogress";
    
    export default{
       data(){
          return{
            data:[],
            roleId:getStore({name: 'userInfo'}).roleId,
            orderDetail:{},
            page: {
              pageSize: 10,
              currentPage: 1,
              total: 1
            },
            option:{
              // searchShow: true,
              searchMenuSpan: 6,
              tip: false,
              tree: true,
              border: true,
              // selection: true,
              delBtn: false,
              addBtn:false,
              editBtn:false,
              height:'auto',
              column:[
                {
                    label:"订单编号",
                    prop:"orderCode",
                    search:true
                },
                {
                    label:"订单用户",
                    prop:"orderName",
                    search:true
                },
                {
                    label:"订单数量",
                    prop:"orderNum",
                    dataType: "number"
                },
                {
                  label:"总价",
                  prop:"totalPrice"
                },
                {
                  label:"总重",
                  prop:"orderWeight"
                },
                {
                  label:"实际数量",
                  prop:"actualNum"
                },
                {
                  label:"订单时间",
                  prop:"orderTime"
                },
                {
                  label:"备注",
                  prop:"remark"
                },
                {
                  label:"状态",
                  prop:"status",
                  search: true,
                  slot: true,
                  type:"select",
                  dicData:[
                     {
                      label:"未完成",
                      value:0
                     },
                     {
                       label:"已处理",
                       value:1
                     }
                    ]
                }
              ]
            }
          }
       },
       methods:{
        onLoad(page, params = {}) {
            this.loading = true;
            getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
              console.log(res);
              this.data = res.data.data.data;
              this.page.total=res.data.data.count;
              this.loading = false;
            });
          }, 
          searchChange(params, done){
            console.log(params);
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
          },
          searchReset() {
            this.parentId = 0;
            this.onLoad(this.page);
          },
          currentChange(currentPage){
            this.page.currentPage = currentPage;
          },
          sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
        //   done, loading
          rowSave(row){
            console.log(row);
          },
          handleOrder(code){
            console.log(code);
            //  getOrderDetail(code).then((res)=>{
            //   console.log(res);
            //    this.orderDetail=res.data.data;
            //    console.log(this.orderDetail);
            //  })
          },
          handleEdit(row){
             //详情
             console.log(row);
          }  
       }
    
    }
    
    </script>